<template>
  <div class="titleBodyCom">
    <div class="itemTitle">
      <span
          class="text"
          :key="index"
          v-for="(char, index) in titleArray"
          :style="{ '--delay': index * 0.1 + 's' }"
      >
        {{ char === ' ' ? '\u00A0' : char }}
      </span>
    </div>
  </div>
</template>

<script>
import gsap from 'gsap'

export default {
  name: "titleCom",
  data() {
    return {}
  },
  computed: {
    titleArray() {
      return Array.from(this.name);
    }
  },
  props: {
    name: {
      type: String,
      default: ''
    },
    icon: {
      type: String,
      default: ''
    },
  },
  mounted() {
    gsap.to(this.$refs.icon, {
      duration: 1.5,
      scale: 1,
      onComplete: () => {
        gsap.to(this.$refs.icon, {
          duration: 1,
          y: "+=5",
          repeat: 1,
          yoyo: true,
        });
      }
    });
  },
}
</script>
<style lang="scss" scoped>

.titleBodyCom {
  width: calc(100% - 0px);
  position: relative;
  height: 44px;
  background: url(./assets/titleBg.png) no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: nowrap;
  flex-direction: row;
  z-index: 1;
  align-content: flex-start;

  .itemTitle {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;
    margin-left: 32px;
	margin-top: 3px;

    .text {
      opacity: 0;
      transform: translateY(1em);
      animation: appear 0.5s forwards;
      animation-delay: var(--delay);
      font-family: YouSheBiaoTiHei;
      font-size: 22px;
      color: #C6F1FF;
    }
  }

  @keyframes appear {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}
</style>
